<template>
    <div id="app" @click="isTimeOut">
        <router-view/>
    </div>
</template>

<script>
    import {getCurrentInstance} from 'vue'

    export default {
        name: 'App', data() {
            return {
                lastTime: null, // 最后一次点击的时间
                currentTime: null, // 当前点击的时间
                timeOut: 30 * 60 * 1000 // 设置超时时间:30分钟
            }
        },
        created() {
            this.lastTime = new Date().getTime()
            window.setInterval(() => {
                setTimeout(this.isTimeOutF(), 0);

            }, 5000);
        },
        methods: {
            isTimeOutF() {

                this.currentTime = new Date().getTime() // 记录这次点击的时间
                if (this.currentTime - this.lastTime > this.timeOut) { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
                    this.ctx.$msg.error("超时")
                    this.lastTime = new Date().getTime()
                    this.ctx.$router.push({name: 'login'})
                }
            },
            isTimeOut() {
                this.currentTime = new Date().getTime() // 记录这次点击的时间
                if (this.currentTime - this.lastTime > this.timeOut) { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
                    this.ctx.$router.push({name: 'login'})

                } else {
                    this.lastTime = new Date().getTime() // 如果在30分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
                }
            }
        },
        setup() {
            const {ctx} = getCurrentInstance();
            return {
                ctx
            }
        }

    }
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    html,
    body,
    #app {
        height: 100%;
    }


</style>
